<template>
  <div class="move_b_box">
    <div class="move_box" ref="sessionLog" :style="{width:displayInfo.area[0]?displayInfo.area[0]:'26%',height:displayInfo.area[1]?displayInfo.area[1]:'30%',top:topIndex}">
      <div class="move_title">
        <div class="title_inf">{{displayInfo.title}}</div>
        <div class="move_close">

        </div>
        <div class="content">
          <slot name="form">

          </slot>
          <slot name="other">

          </slot>
        </div>
        <div class="dailog-from" v-if="displayInfo.btn">
          <button type="button" class="close-btn"  @click="closeData(displayInfo.no,displayInfo.params)">{{displayInfo.btn.close}}</button>
          <button type="button" class="confirm-btn" @click="confirmSubData(displayInfo.yes,displayInfo.params)">{{displayInfo.btn.confirm}}</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import  {mapState} from 'vuex';
  const   PERCENT='%';
  export default{
    name: 'move_b_box',
    data(){
      return {
          topIndex:'35%'
      }
    }, computed: {
      ...mapState({
        displayInfo: 'jelly_from'
      }),
    },
    created(){

    },
    mounted(){
       this.$nextTick(()=>{
         if(this.displayInfo.area.length!==0){
           let height     =   this.displayInfo.area[1];
           let top        =   parseInt(height.replace(PERCENT,''));
           this.topIndex  =   Math.ceil(top/2)+PERCENT;
         }
       });
    },methods:{
      confirmSubData(callback,param){
          callback(1,param);
      },closeData(callback,param){
          callback(2,param);
      }
    }
  }
</script>
<style type="text/css" scoped>
  @keyframes move_box {
    0% {
      opacity: 0;
    }
    60% {
      opacity: 1;
    }
    80% {
      opacity: 1;
      width: 34%;
      height: 38%;
    }
    100% {
      opacity: 1;
    }
  }

  .move_b_box {
    width: 100%;
    height: 100%;
    position: fixed;
    background: #999;
    top: 0px;
    left: 20px;
  }

  .move_box {
    width: 26%;
    height: 30%;
    background: #fff;
    text-align: center;
    margin: 0px auto;
    line-height: 200px;
    position: relative;
    top: 40%;
    animation-name: move_box;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-delay: .05s;
    animation-fill-mode: forwards;
    opacity: 0;

  }

  .move_title {
    width: 100%;
    height: 41px;
    border-bottom: 1px solid #e6e6e6;
  }

  .move_title .title_inf {
    width: 80%;
    height: 40px;
    line-height: 40px;
    text-indent: 10px;
    color: #585858;
    font-size: 16px;
    font-family: "微软雅黑";
    text-align: left;
    float: left
  }

  .move_title .move_close {
    width: 40px;
    height: 40px;
    background: url(jelly_close_.jpg) no-repeat;
    float: right;
  }
  .content{width: 100%; height: auto; float: left;}
  .dailog-from{width: 100%; height: 42px; bottom: 0px; float: left; position: absolute; }
  .confirm-btn{width: 80px; height: 36px; float: right; line-height: 40px; background:#5ccdde; color: #fff; border: 0px;}
  .close-btn{width: 80px; height: 36px; float: right; line-height: 40px; border: 0px; color: #f9f9f9; margin-left: 6px; margin-right: 12px;}
</style>
